<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head th:replace="_fregments :: head(~{::title})">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>导航管理</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="../../static/lib/bootstrap-3.4.1/css/bootstrap.min.css">
    <!-- bootstrap-select -->
    <link href="../../static/lib/bootstrap-select/bootstrap-select.css" rel="stylesheet">
    <link rel="stylesheet" href="../../static/css/my.css">
    <!-- 动画 -->
    <link rel="stylesheet" href="../../static/css/animate.css">
    <!-- bootstrap-bootstrapValidator-->
    <link rel="stylesheet" href="../../static/lib/bootstrapValidator/bootstrapValidator.min.css">
</head>

<body>
<nav class="navbar navbar-default navbar-fixed-top m-padding" th:replace="_fregments :: menu(2)">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
                <img alt="Brand" src="../../static/favicon.ico" style="width: 24px;">
            </a>
            <p class="navbar-text navbar-default"><a href="#" class="navbar-link m-a-none"><b>后台管理</b></a></p>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="index.html"><span class="glyphicon glyphicon-home">&nbsp;</span>首页</a></li>
                <li class="active"><a href="navigation.html"><span class="glyphicon glyphicon-tasks">&nbsp;</span>导航管理</a>
                </li>
                <li><a href="tag.html"><span class="glyphicon glyphicon-tag">&nbsp;</span>标签管理</a></li>
                <li><a href="link.html"><span class="glyphicon glyphicon-link">&nbsp;</span>链接管理</a></li>
                <li role="presentation" class="disabled"><a href="#"><span
                        class="glyphicon glyphicon-bookmark">&nbsp;</span>书签管理</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">
                        <img class="m-avatar img-circle"
                             src="../../static/images/me.jpg">
                        挚夕
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-left">
                        <li><a href="#"><span class="glyphicon glyphicon-th">&nbsp;</span>个人主页</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#"><span class="glyphicon glyphicon-log-out">&nbsp;</span>登出</a></li>
                    </ul>
                </li>
            </ul>

            <form class="navbar-form navbar-right">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="搜索" style="width: 300px;">
                </div>
                <button type="submit" class="btn btn-default">
                    <a class="glyphicon glyphicon-search m-none"></a>
                </button>
            </form>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<div class="m-margin-top">
    <!-- 一级导航新增/修改模态框 -->
    <div class="modal fade" id="modal-first-nav" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">修改一级导航</h4>
                </div>
                <div class="modal-body">
                    <!--修改时使用-->
                    <input type="hidden" name="id" class="nav-id" id="hidden-input-first">
                    <div class="form-group">
                        <label for="input-first-name">导航名称</label>
                        <input type="text" placeholder="导航名称" id="input-first-name" name="inputFirstName"
                               class="form-control" required
                               autofocus>
                        <span></span>
                    </div>
                    <div class="form-group">
                        <label for="input-first-icon">图标class</label>
                        <input type="text" placeholder="图标class" id="input-first-icon" name="inputFirstIcon"
                               class="form-control" required autofocus>
                    </div>
                    <div class="form-group">
                        <label for="select-first-priority">选择优先级</label>
                        <select class="form-control" id="select-first-priority" required autofocus>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="btn-first-save">保存</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 二级导航新增/修改模态框 -->
    <div class="modal fade" id="modal-second-nav" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">修改二级导航</h4>
                </div>
                <div class="modal-body">
                    <!--修改时使用-->
                    <input type="hidden" name="id" class="nav-id" id="hidden-input-second">
                    <div class="form-group">
                        <label for="input-second-name">导航名称</label>
                        <input placeholder="导航名称" id="input-second-name" name="inputSecondName" type="text"
                               class="form-control" required autofocus>
                    </div>
                    <div class="form-group">
                        <label for="select-second-modal">选择一级导航菜单</label>
                        <select id="select-second-modal" name="select-second-modal" class="form-control selectpicker"
                                 data-live-search="true" required autofocus>
                            <option th:each="firstNav : ${firstNavigation}" th:text="${firstNav.name}" th:value="${firstNav.id}">
                                常用推荐
                            </option>
                        </select>
                    </div>
<!--                    <div class="form-group">-->
<!--                        <label for="input-second-icon">图标class</label>-->
<!--                        <input type="text" placeholder="图标class" id="input-second-icon" name="inputSecondIcon"-->
<!--                               class="form-control" required autofocus>-->
<!--                    </div>-->
                    <div class="form-group">
                        <label for="select-second-priority">选择优先级</label>
                        <select class="form-control" id="select-second-priority" required autofocus>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                        </select>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="btn-second-save">保存</button>
                </div>
            </div>
        </div>
    </div>

    <div class="m-container">
        <!--一级导航开始-->
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">一级导航</h3>
            </div>
            <div class="panel-body">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-xs-5 col-sm-5 col-md-3">
                                <input placeholder="导航名称" id="first-nav-input" class="form-control m-input">
                            </div>
                            <div class="col-xs-7 col-sm-7 col-md-4">
                                <button type="submit" class="btn btn-danger btn-sm" id="first-nav-btn-clear">
                                    清空
                                </button>
                                <button type="submit" class="btn btn-success btn-sm" id="first-nav-search">
                                    <span class="glyphicon glyphicon-search m-none">&nbsp;</span>搜索
                                </button>
                                <button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#modal-first-nav"
                                        id="btn-add-first" data-title="新增一级导航">新增
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <table class="table table-hover">
                    <thead>
                    <td>#</td>
                    <td>导航名称</td>
                    <td>操作</td>
                    </thead>
                    <tbody id="table-first-nav-body">

                    <tr th:each="nav,it : ${firstNavigation}">
                        <td th:text="${it.count}">1</td>
                        <td>[[${nav.name}]]&nbsp;<span class="badge" th:text="${nav.linkCnt}">14</span></td>
                        <td>
                            <button type="button" class="btn btn-primary btn-sm btn-update-first"
                                    data-toggle="modal" data-target="#modal-first-nav" th:data-id="${nav.id}"
                                    data-title="修改一级导航">修改
                            </button>
                            <button type="button" class="btn btn-danger btn-sm btn-delete" th:data-id="${nav.id}"
                                    th:data-name="${nav.name}">
                                删除
                            </button>
                        </td>
                    </tr>

                    </tbody>
                </table>
            </div>
            <div class="panel-footer">

            </div>
        </div><!--一级导航结束-->

        <!--二级导航开始-->
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">二级导航</h3>
            </div>
            <div class="panel-body">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-xs-6 col-sm-4 col-md-3 form-group">
                                <input placeholder="导航名称" id="second-nav-input" class="form-control m-input">
                            </div>
                            <div class="col-xs-6 col-sm-4 col-md-3 form-group">
                                <select id="second-nav-select"
                                        class="form-control form-control-placeholder m-select selectpicker"
                                        data-live-search="true">
                                    <option value="0" disabled selected hidden>一级导航</option>

                                    <option th:each="firstNav : ${firstNavigation}" th:value="${firstNav.id}"
                                            th:text="${firstNav.name}">常用推荐
                                    </option>
                                    <!--                                    <option value="1">学习教育</option>-->
                                    <!--                                    <option value="2">生活服务</option>-->
                                </select>
                            </div>
                            <div class="col-xs-8 col-sm-4 col-md-3 form-group">
                                <button type="submit" class="btn btn-danger btn-sm" id="second-nav-clear">
                                    清空
                                </button>
                                <button type="submit" class="btn btn-success btn-sm" id="second-nav-search">
                                    <span class="glyphicon glyphicon-search m-none">&nbsp;</span>搜索
                                </button>
                                <button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#modal-second-nav"
                                        id="btn-add-second" data-title="新增二级导航">
                                    新增
                                </button>
                            </div>

                        </div>
                    </div>
                </div>
                <table class="table table-striped">
                    <thead>
                    <td>#</td>
                    <td>导航名称</td>
                    <td>所属父级导航</td>
                    <td>操作</td>
                    </thead>
                    <tbody id="table-second-nav-body">
                    <tr th:each="nav, it : ${secondNavigation}">
                        <td th:text="${it.count}">1</td>
                        <td>[[${nav.name}]]&nbsp;<span class="badge" th:text="${nav.linkCnt}">14</span></td>
                        <td th:text="${nav.parentNavName}">常用推荐</td>
                        <td>
                            <button type="button" class="btn btn-primary btn-sm"
                                    data-toggle="modal" data-target="#modal-second-nav" th:data-id="${nav.id}"
                                    data-title="修改二级导航">修改
                            </button>
                            <button type="button" class="btn btn-danger btn-sm btn-delete" th:data-id="${nav.id}"
                                    th:data-name="${nav.name}">删除
                            </button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="panel-footer m-align-right">

            </div>
        </div><!--二级导航结束-->
    </div>
</div>

<footer th:replace="_fregments :: footer">
    <div>
        <div class="row">
            <div class="col-sm-4 col-md-4">
                <h3>挚夕导航</h3>
                <p>
                    挚夕导航最初源于本人想要做一个管理书签的系统。<br>
                    后来借鉴了一些导航网站，决定做一个网站导航。<br>
                    前端使用BootStrap。
                </p>
            </div>
            <div class="col-sm-8 col-md-8">
                占位
            </div>
        </div>
    </div>

    <div style="text-align: center;">
        Copyright 2023-now 挚夕导航 Designed by 挚夕
    </div>
</footer>

<!--/*/<th:block th:replace="_fregments :: script">/*/-->
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="../../static/lib/jquery-1.12.4/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="../../static/lib/bootstrap-3.4.1/js/bootstrap.min.js"></script>
<!--  bootstrap-dropdown-hover -->
<script src="../../static/lib/bootstrap-dropdown-hover.js"></script>
<!-- bootstrap-select-->
<script src="../../static/lib/bootstrap-select/bootstrap-select.js"></script>
<script src="../../static/lib/bootstrap-select/defaults-zh_CN.js"></script>
<script src="../../static/lib/toastr/toastr.min.js"></script>
<!-- bootstrap-bootstrapValidator-->
<script src="../../static/lib/bootstrapValidator/bootstrapValidator.min.js"></script>
<script src="../../static/lib/bootstrapValidator/zh_CN.js"></script>

<script>
    $(function () {
        //bootstrap-dropdown-hover
        $('.navbar [data-toggle="dropdown"]').bootstrapDropdownHover({
            // see next for specifications
        });
        //特效
        $("li").hover(function () {
            $(this).toggleClass("m-up");
        })
    })
</script>
<!--/*/</th:block>/*/-->

<script type="text/javascript">
    function initValidator(){
        //表单校验
        $('#modal-first-nav').bootstrapValidator({
            excluded: [":disabled", ":hidden"], // 关键配置，表示只对于禁用域不进行验证，其他的表单元素都要验证
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                inputFirstName: {
                    validators: {
                        notEmpty: {
                            message: '导航名不能为空'
                        },
                        stringLength: {
                            min: 2,
                            max: 6,
                            message: '导航名长度必须在2到6位之间'
                        }
                    }
                },
                inputFirstIcon: {
                    validators: {
                        notEmpty: {
                            message: '图标class不能为空'
                        },
                        stringLength: {
                            max: 50,
                            message: '图标class长度不能超过50'
                        }
                    }
                }
            }
        });
        $('#modal-second-nav').bootstrapValidator({
            excluded: [":disabled", ":hidden"], // 关键配置，表示只对于禁用域不进行验证，其他的表单元素都要验证
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                inputSecondName: {
                    validators: {
                        notEmpty: {
                            message: '导航名不能为空'
                        },
                        stringLength: {
                            min: 2,
                            max: 6,
                            message: '导航名长度必须在2到6位之间'
                        }
                    }
                },
                // inputSecondIcon: {
                //     validators: {
                //         notEmpty: {
                //             message: '图标class不能为空'
                //         },
                //         stringLength: {
                //             max: 50,
                //             message: '图标class长度不能超过50'
                //         }
                //     }
                // }
            }
        });
    }
    $(function () {
        //初始化校验器
        initValidator();

        // 一级导航模块 清空按钮
        $("#first-nav-btn-clear").click(function () {
            $("#first-nav-input").val('');
        });
        // 二级导航模块 清空按钮
        $("#second-nav-clear").click(function () {
            $("#second-nav-input").val('');
            $("#second-nav-select").selectpicker('val', 0);
        });
        //模态窗口
        $("#modal-first-nav").on('show.bs.modal', function (event) {
            //获取点击的按钮对象
            var button = $(event.relatedTarget)
            //获取按钮绑定的数据 data-* attributes
            var title = button.data('title')
            var id = button.data('id');
            // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
            var modal = $(this)
            if (id) { //传了id,表示修改，查数据
                modal.find('.nav-id').val(id);
                $.ajax({
                    type: 'get',
                    url: '[[@{/admin/navigation/}]]' + id,
                    success: function (response) {
                        modal.find('#input-first-name').val(response.data.name);
                        modal.find('#input-first-icon').val(response.data.iconClass);
                        modal.find('#select-first-priority').val(response.data.priority);
                    }
                })
            }
            // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
            modal.find('.modal-title').text(title)
        })
        $("#modal-second-nav").on('show.bs.modal', function (event) {
            //获取点击的按钮对象
            var button = $(event.relatedTarget)
            //获取按钮绑定的数据 data-* attributes
            var title = button.data('title')
            var id = button.data('id');
            // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
            var modal = $(this)
            if (id) { //传了id,表示修改，查数据
                modal.find('.nav-id').val(id);
                $.ajax({
                    type: 'get',
                    url: '[[@{/admin/navigation/}]]' + id,
                    success: function (response) {
                        modal.find('#input-second-name').val(response.data.name);
                        // modal.find('#input-second-icon').val(response.data.iconClass);
                        modal.find('#select-second-priority').val(response.data.priority);
                        // modal.find('#select-second-modal').val(response.data.parentId);
                        //不能直接设置val,显示有误
                        modal.find('#select-second-modal').selectpicker('val', response.data.parentId);
                    }
                })
            }
            // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
            modal.find('.modal-title').text(title)
            // modal.find('.modal-body input').val(recipient)
            //输入框获取焦点
            $("#input-second-modal").focus();
        })

        //清空模态窗口(点击新增按钮时调用)
        function clearFirstModal() {
            $("#hidden-input-first").val(null);
            //清空输入框
            $("#input-first-name").val('');
            $("#input-first-icon").val('');
            //下拉列表选择
            $("#select-first-priority").val(1);
        }

        function clearSecondModal() {
            $("#hidden-input-second").val(null);
            //清空输入框
            $("#input-second-name").val('');
            // $("#input-second-icon").val('');
            //下拉列表选择
            // $("#select-second-modal:first-child").prop("selected", 'true');//没用
            var firstVal = $("#select-second-modal option:first").val();
            $("#select-second-modal").selectpicker('val',firstVal);
            $("#select-second-priority").val(1);
        }

        $("#btn-add-first").click(function () {
            clearFirstModal();
        });
        $("#btn-add-second").click(function () {
            clearSecondModal();
        });
        //模态窗口保存按钮（新增/更新对应不同的请求，根据隐藏input id判断）
        $("#btn-first-save").click(function () {
            var bootstrapValidator = $("#modal-first-nav").data("bootstrapValidator").validate();
            if (!bootstrapValidator.isValid()) return;
            //收集数据
            var id = $("#hidden-input-first").val();
            var name = $("#input-first-name").val().trim();
            var icon = $("#input-first-icon").val().trim();
            var priority = $("#select-first-priority").val();
            // alert(name + icon + priority);
            //添加/修改一级导航
            $.ajax({
                type: id ? "put" : "post",
                url: id ? "[[@{/admin/navigation/update}]]" : "[[@{/admin/navigation/add}]]",
                data: {
                    id: id,
                    name: name,
                    iconClass: icon,
                    priority: priority
                },
                success: function (response) {
                    var msg = id ? '修改成功' : '新增成功';
                    if (response.status == "success") {
                        $("#modal-first-nav").modal("hide");
                        //更新下拉列表数据
                        reloadSelect();
                        //更新表格
                        reloadFirstNav();
                        reloadSecondNav();
                        //重置表单
                        $("#modal-first-nav").bootstrapValidator('resetForm');
                        toastr.success(msg, '提示');
                    } else {
                        toastr.error(response.data.errorMessage, '错误');
                    }
                },
                error: function (response) {
                    toastr.error(response.responseText, "请求失败");
                }
            });
        });

        $("#btn-second-save").click(function () {
            var bootstrapValidator = $("#modal-second-nav").data("bootstrapValidator").validate();
            if (!bootstrapValidator.isValid()) return;
            //收集数据
            var id = $("#hidden-input-second").val();
            var name = $("#input-second-name").val().trim();
            // var icon = $("#input-second-icon").val().trim();
            var parentId = $("#select-second-modal").val();
            var priority = $("#select-second-priority").val();
            // alert(name + icon + parentId + priority);
            //添加/修改二级导航
            $.ajax({
                type: id ? "put" : "post",
                url: id ? "[[@{/admin/navigation/update}]]" : "[[@{/admin/navigation/add}]]",
                data: {
                    id: id,
                    name: name,
                    // iconClass: icon,
                    parentId: parentId,
                    priority: priority
                },
                success: function (response) {
                    if (response.status == "success") {
                        var msg = id ? '修改成功' : '新增成功';
                        toastr.success(msg, '提示');
                        $("#modal-second-nav").modal("hide");
                        //更新表格数据
                        reloadFirstNav();
                        reloadSecondNav();
                        //重置表单
                        $("#modal-second-nav").bootstrapValidator('resetForm');
                    } else {
                        toastr.error(response.data.errorMessage, '错误');
                    }
                },
                error: function (response) {
                    toastr.error(response.responseText, "请求失败");
                }
            });
        });

        //删除按钮绑定事件 动态生成的也生效
        $("tbody").on("click", ".btn-delete", function () {
            //获取对应id
            var id = $(this).data('id');
            var name = $(this).data('name');
            // toastr.info("删除", id)
            swal({
                title: "提示",
                text: "确认删除" + " <" + name + "> " + "吗?",
                icon: "warning",
                dangerMode: true,
                buttons: ['取消', '确认']
            }).then(function (willDelete) {
                if (willDelete) {
                    $.ajax({
                        type: 'delete',
                        url: '[[@{/admin/navigation/delete/}]]' + id,
                        success: function (response) {
                            if (response.status == 'success') {
                                //清空搜索条件
                                $("#first-nav-input").val('');
                                $("#second-nav-input").val('');
                                $("#second-nav-select").selectpicker('val', -1);
                                //刷新下拉列表数据
                                reloadSelect();
                                //刷新表格数据
                                reloadFirstNav();
                                reloadSecondNav();
                                swal("删除成功！", {
                                    icon: "success",
                                });
                            } else {
                                swal("删除失败:" + response.data.errorMessage, {
                                    icon: "error",
                                    buttons: "确认"
                                });
                            }
                        },
                        error: function (response) {
                            toastr.error(response.data.errorMessage, '错误');
                        }
                    })
                } else {
                    swal("操作取消", {
                        icon: "info",
                        button: "确认",
                    });
                }
            });
        });

        //重新加载一级导航表格
        function reloadFirstNav() {
            //带上搜索参数
            var name = $("#first-nav-input").val();
            var htmlStr = "";
            //ajax请求
            $.ajax({
                type: "get",
                url: "[[@{/admin/navigation/search1}]]",
                data:{
                    name: name
                },
                success: function (response) {
                    //更新表格
                    var navs = response.data;
                    // console.log(navs);
                    $.each(navs, function (index, obj) {
                        htmlStr += "<tr>";
                        htmlStr += "<td>" + (index + 1) + "</td>";
                        htmlStr += "<td>" + obj.name + "&nbsp;<span class=\"badge\">" + obj.linkCnt + "</span>" + "</td>";
                        htmlStr += "<td>";
                        htmlStr += "<button type=\"button\" class=\"btn btn-primary btn-sm btn-update-first\" data-toggle=\"modal\" data-target=\"#modal-first-nav\""
                            + " data-id= '" + obj.id + "' data-title=\"修改一级导航\">修改</button>"
                        htmlStr += "&nbsp;<button type=\"button\" class=\"btn btn-danger btn-sm btn-delete\" data-id='" + obj.id
                            + "' data-name='" + obj.name + "'>删除</button>"
                        htmlStr += "</td>";
                        htmlStr += "</tr>";
                    })
                    // console.log(htmlStr)
                    //写入页面
                    $("#table-first-nav-body").html(htmlStr);
                },
                error: function (response) {
                    toastr.error(response.responseText, "请求失败");
                }
            })
        }

        //重新加载二级导航表格
        function reloadSecondNav() {
            var name = $("second-nav-input").val();
            var parentId = $("#second-nav-select").val();
            //ajax请求
            $.ajax({
                type: "get",
                url: "[[@{/admin/navigation/search2}]]",
                data:{
                  name: name,
                  parentId: parentId
                },
                success: function (response) {
                    //更新表格
                    var navs = response.data;
                    var htmlStr = "";
                    $.each(navs, function (index, obj) {
                        htmlStr += "<tr>";
                        htmlStr += "<td>" + (index + 1) + "</td>";
                        htmlStr += "<td>" + obj.name + "&nbsp;<span class=\"badge\">" + obj.linkCnt + "</span>" + "</td>";
                        htmlStr += "<td>" + obj.parentNavName + "</td>"
                        htmlStr += "<td>";
                        htmlStr += "<button type=\"button\" class=\"btn btn-primary btn-sm btn-update-first\" data-toggle=\"modal\" data-target=\"#modal-second-nav\""
                            + " data-id= '" + obj.id + "' data-title=\"修改二级导航\">修改</button>"
                        htmlStr += "&nbsp;<button type=\"button\" class=\"btn btn-danger btn-sm btn-delete\" data-id='" + obj.id
                            + "' data-name='" + obj.name + "'>删除</button>"
                        htmlStr += "</td>";
                        htmlStr += "</tr>";
                    })
                    //写入页面
                    $("#table-second-nav-body").html(htmlStr);
                },
                error: function (response) {
                    toastr.error(response.responseText, "请求失败");
                }
            });
        }

        //重新加载 下拉列表数据
        function reloadSelect() {
            var htmlStr = '';
            $.ajax({
                type: 'get',
                url: '[[@{/admin/navigation/firstNav}]]',
                success: function (response) {
                    if (response.status == 'success') {
                        var navs = response.data;
                        $.each(navs, function (index, obj) {
                            htmlStr += "<option value='" + obj.id + "'>" + obj.name + "</option>";
                        });
                        console.log(htmlStr);
                        var defaultOption = "<option value=\"0\" disabled selected hidden>一级导航</option>";
                        $("#second-nav-select").html(defaultOption + htmlStr).selectpicker('refresh');
                        $("#select-second-modal").html(htmlStr).selectpicker('refresh');
                    }
                }
            })
        }

        //搜索一级导航列表
        $("#first-nav-search").click(function () {
            //收集数据
            var name = $("#first-nav-input").val().trim();
            //ajax请求
            $.ajax({
                type: "get",
                url: "[[@{/admin/navigation/search1}]]",
                data: {
                    name: name
                },
                success: function (response) {
                    var htmlStr = "";
                    //更新表格
                    var navs = response.data;

                    $.each(navs, function (index, obj) {
                        htmlStr += "<tr>";
                        htmlStr += "<td>" + (index + 1) + "</td>";
                        htmlStr += "<td>" + obj.name + "&nbsp;<span class=\"badge\">" + obj.linkCnt + "</span>" + "</td>";
                        htmlStr += "<td>";
                        htmlStr += "<button type=\"button\" class=\"btn btn-primary btn-sm btn-update-first\" data-toggle=\"modal\" data-target=\"#modal-first-nav\""
                            + " data-id= '" + obj.id + "' data-title=\"修改一级导航\">修改</button>"
                        htmlStr += "&nbsp;<button type=\"button\" class=\"btn btn-danger btn-sm btn-delete\" data-id='" + obj.id
                            + "' data-name='" + obj.name + "'>删除</button>"
                        htmlStr += "</td>";
                        htmlStr += "</tr>";
                    })
                    // console.log(htmlStr)
                    //写入页面
                    $("#table-first-nav-body").html(htmlStr);
                },
                error: function (response) {
                    toastr.error(response.responseText, "请求失败");
                }
            })
        });
        //搜索二级导航列表
        $("#second-nav-search").click(function () {
            var name = $("#second-nav-input").val().trim();
            var parentId = $("#second-nav-select").val();
            console.log(name);
            console.log(parentId);
            if (parentId == 0) parentId = null;
            //ajax请求
            $.ajax({
                type: "get",
                url: "[[@{/admin/navigation/search2}]]",
                data: {
                    name: name,
                    parentId: parentId
                },
                success: function (response) {
                    var htmlStr = "";
                    //更新表格
                    var navs = response.data;
                    $.each(navs, function (index, obj) {
                        htmlStr += "<tr>";
                        htmlStr += "<td>" + (index + 1) + "</td>";
                        htmlStr += "<td>" + obj.name + "&nbsp;<span class=\"badge\">" + obj.linkCnt + "</span>" + "</td>";
                        htmlStr += "<td>" + obj.parentNavName + "</td>"
                        htmlStr += "<td>";
                        htmlStr += "<button type=\"button\" class=\"btn btn-primary btn-sm btn-update-first\" data-toggle=\"modal\" data-target=\"#modal-second-nav\""
                            + " data-id= '" + obj.id + "' data-title=\"修改二级导航\">修改</button>"
                        htmlStr += "&nbsp;<button type=\"button\" class=\"btn btn-danger btn-sm btn-delete\" data-id='" + obj.id
                            + "' data-name='" + obj.name + "'>删除</button>"
                        htmlStr += "</td>";
                        htmlStr += "</tr>";
                    })
                    //写入页面
                    $("#table-second-nav-body").html(htmlStr);
                },
                error: function (response) {
                    toastr.error(response.responseText, "请求失败");
                }
            })
        })
    });
</script>
</body>
</html>